<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <script>
                function title() {
                    document.getElementById('atendimento').className='selected';
                }
                window.onload=title;
            </script>
            <h:form id="uForm" enctype="multipart/form-data">
                <h1 class="title">
                    <a href="#" class="back" onclick="history.go(-1)"/>
                    Cancelar Atendimento Médico
                </h1>

                <p:messages id="messages" showDetail="true" autoUpdate="true"  /> 
                <div class="row">
                    <div class="twelve columns">

                        <p:commandButton style="left: 840px;" update="dlg" process="@this" oncomplete="dlg.show();"
                                         value="Visualizar"  icon="ui-icon-search" rendered="#{managerSearchDoctor.mySchedule}"/>

                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Cadastrar</h4></legend>
                            <p:panel id="userPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix ">

                                <p:outputLabel value="Médico: " styleClass="grid_3"/>

                                <p:autoComplete value="#{managerSearchDoctor.doctorUnattended}" 
                                                disabled="#{managerSearchDoctor.mySchedule}"
                                                id="selectDoctor" completeMethod="#{managerDoctor.autocomplete}"  
                                                var="d" itemLabel="#{d.name}" itemValue="#{d}" forceSelection="true"
                                                styleClass="grid_19" dropdown="true" panelStyle="max-height:200px;" 
                                                converter="#{autocompleteconverter}" >  
                                </p:autoComplete>

                                <p:outputLabel value="Motivo: " styleClass="grid_3"/>
                                <p:inputTextarea styleClass="grid_20" value="#{managerSearchDoctor.unattended.description}" />
                                <p:outputLabel for="de" value="De:" styleClass="grid_3"/>  
                                <p:calendar id="de" value="#{managerSearchDoctor.unattended.startTime}" 
                                            showOn="button" styleClass="grid_7" pattern="dd/MM/yyyy HH:mm"
                                            required="true"/>  

                                <p:outputLabel for="ate" value="Até" styleClass="grid_6"/>  
                                <p:calendar id="ate" value="#{managerSearchDoctor.unattended.endTime}" 
                                            showOn="button" styleClass="grid_7" pattern="dd/MM/yyyy HH:mm" 
                                            required="true"/> 

                            </p:panel>

                        </fieldset>


                        <br/>
                        <div class="buttonAction">
                            <p:commandButton value="Salvar" icon="ui-icon-disk"
                                             update="@form" process="@form"
                                             actionListener="#{managerSearchDoctor.updateUnattended()}"
                                             styleClass="ui-priority-primary" />
                            <p:button href="indexdoctor.xhtml" value="Cancelar"  icon="ui-icon-trash" />

                        </div >
                    </div>


                </div>
                <p:dialog id="dlg"  widgetVar="dlg" header="Atendimento Cancelado #{managerSearchDoctor.doctorUnattended.name}" 
                          modal="true"
                          width="800" showEffect="clip" > 



                    <p:dataTable var="u" id="utable" value="#{managerSearchDoctor.unattendeds}"  
                                 style="white-space: pre-wrap;" selectionMode="single" rowKey="#{u.id}"
                                 emptyMessage="Nenhum registro encontrado" sortMode="multiple" rowIndexVar="unaid"
                                 paginatorPosition="bottom" paginator="true" rows="5">


                        <p:column  headerText="Excluir" width="30">  

                            <p:commandButton icon="ui-icon-trash"  title="Excluir Cancelamento" alt="Excluir Cancelamento"
                                             actionListener="#{managerSearchDoctor.removerUnattended(unaid)}"
                                             process="@this" update="@form"
                                             onclick="dlg.hide();"
                                             style="width: 25px; position: relative"/>
                        </p:column>
                        <p:column  headerText="Descrição" >  
                            <h:outputLabel value="#{u.description}" />  
                        </p:column>
                        <p:column  headerText="De" >  
                            <h:outputLabel value="#{u.startTime}"> 
                                <f:convertDateTime  pattern="dd/MM/yyyy HH:mm" /> 
                            </h:outputLabel>  
                        </p:column>
                        <p:column  headerText="Até" >  
                            <h:outputLabel value="#{u.endTime}"> 
                                <f:convertDateTime  pattern="dd/MM/yyyy HH:mm" /> 
                            </h:outputLabel>   
                        </p:column>
                    </p:dataTable>

                </p:dialog> 


            </h:form>
        </ui:define>
    </ui:composition>

</html>
